<head>
	<style type="text/css">
        #chat_body_process{
        	display: block;
        	padding: 2px 0;
        }
    </style>
	<script type="text/javascript">
		var aJaxURL		= "server-side/report/chat_history.action.php";		//server side folder url
		var tName		= "example";										//table name
		var fName		= "add-edit-form";									//form name
		
		$(document).ready(function () {
			GetDate("search_start_my_ts");
			GetDate("search_end_my_ts");			
			LoadTable();
			$("#chat").hide();
		});		
		
		function LoadTable(){
			var start	= $("#search_start_my_ts").val();
	    	var end		= $("#search_end_my_ts").val();
			/* Table ID, aJaxURL, Action, Colum Number, Custom Request, Hidden Colum, Menu Array */
			GetDataTable(tName, aJaxURL, "get_list&start="+start+"&end="+end,9, "", 0, "", 1, "desc");
		}	
	    
		$(document).on("click", "#example tbody tr", function () {
			var nTds = $("td", this);
			var id = $(nTds[0]).text();
			var name = $(nTds[4]).text();

			param 		   = new Object();
			param.act    = 'message';
			param.id     = id;
			
			$.ajax({
		        url: aJaxURL,
			    data: param,
		        success: function(data) {
		        	$("#chat").show();
		        	$("#head_chat").html(name);
					$("#body_chat").html(data.message);
					scroll_bottom('body_chat');
			    }
		    });
		});

		$(document).on("change", "#search_start_my_ts", function () {
		    LoadTable();
		});

		$(document).on("change", "#search_end_my_ts", function () {
			LoadTable();
		});

		function scroll_bottom(body_id){

        	
    		var bottom = document.getElementById(body_id);

    		bottom.scrollTop = bottom.scrollHeight;
        	
    	}  

    </script>
    
</head>

<body>
    <table style="width: 900px; margin: 0 0 0 30px; padding-top:20px; display: block; float: left;">
    		<tr>
    			<td>
                	<h2 align="center">ჩათის ისტორია</h2>
                	<div id="button_area" style="margin-top: 10px;">
                		<div class="left" style="width: 250px;">
    	            		<label for="search_start_my_ts" class="left" style="margin: 5px 0 0 9px;">დასაწყისი</label>
    	            		<input style="width: 150px; margin-left: 5px; height: 18px;"  type="text" name="search_start_my" id="search_start_my_ts" class="inpt left"/>
    	            	</div>
    	            	<div class="right" style="">
    	            		<label for="search_end_my_ts" class="left" style="margin: 5px 0 0 9px;">დასასრული</label>
    	            		<input style="width: 150px; margin-left: 5px; height: 18px;" type="text" name="search_end_my" id="search_end_my_ts" class="inpt right" />
                		</div>
            		</div>
                    <table class="display" id="example">
                        <thead>
                            <tr id="datatable_header">
                                <th>ID</th>
                                <th style="width: 40%;" >№</th>
                                <th style="width: 100%;">დაწყების <br>თარიღი</th>
                                <th style="width: 100%;">დასრულების<br> თარიღი</th>
                                <th style="width: 100%;">სახელი</th>
                                <th style="width: 100%;">ელ-ფოსტა</th>
                                <th style="width: 100%;">IP</th>
                                <th style="width: 100%;">ოპერატორი</th>
                            </tr>
                        </thead>
                        <thead>
                            <tr class="search_header">
                                <th class="colum_hidden">
                                	<input type="text" name="search_id" value="ფილტრი" class="search_init" style=""/>
                                </th>
                                <th>
                                	<input style="width: 30px;" type="text" name="search_number" value="" class="search_init"/>
                                </th>
                                <th>
                                	<input type="text" name="search_number" value="ფილტრი" class="search_init" style="width: 100px;"/>
                                </th>
                                <th>
                                	<input type="text" name="search_number" value="ფილტრი" class="search_init" style="width: 100px;"/>
                                </th>
                                <th>
                                    <input type="text" name="search_date" value="ფილტრი" class="search_init" style="width: 100px;"/>
                                </th>                            
                                <th>
                                    <input type="text" name="search_category" value="ფილტრი" class="search_init" style="width: 100px;" />
                                </th>
                                <th>
                                    <input type="text" name="search_phone" value="ფილტრი" class="search_init" style="width: 100px;"/>
                                </th>
                                <th>
                                    <input type="text" name="search_category" value="ფილტრი" class="search_init" style="width: 100px;" />
                                </th>
                                
                            </tr>
                        </thead>
                    </table>
                </td>    		
    	   </tr>
    </table>
    
    <span id="chat" style=" display: block; width: 300px; height: 500px; position: absolute; right: 60px; top: 100px;">
    <span id="head_chat" style="background: #7DB542; color: #fff; padding: 7px 3px; width: 294px; display: block; border-radius: 5px 5px 0 0;"></span>
    <span id="body_chat" style="border: 1px solid #7DB542;background: #fff; padding: 5px 3px; width: 292px; display: block; height: 85%; overflow-y: scroll;"></span>
    </span>

<!-- jQuery Dialog -->
<div id="add-edit-form" class="form-dialog" title="დავალების ფორმირება">
<!-- aJax -->
</div>

</body>